<template>
	<div class="home">
		<div class="search">
			<div class="search-box">
				<van-icon name="wap-nav" />
				<span class="search-text" @click="toSearchPage">请输入搜索内容</span>
				<span class="search-button">扫一扫</span>
			</div>
		</div>
		<div class="car">
			<div class="car-bg"></div>
			<van-swipe :autoplay="3000">
				<van-swipe-item v-for="(image, index) in images" :key="index">
					<div class="carimg-wrapper"><img v-lazy="image" /></div>
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="menu">
			<div class="menu-item" v-for="(item,index) in menuList" :key="index">
				<img :src="item.img"><br>
				<span class="menu-name">{{item.name}}</span>
			</div>
		</div>
		<div class="cate-wrapper">
			<div class="cate-list">
				<div class="cate-item" :class="{'cate-item-active':item.id === currentCategoryId}" v-for="(item,index) in cateList" :key="index" @click="tabItem(item.id)">{{item.name}}</div>
			</div>
		</div>
		<Product :categoryId="currentCategoryId"></Product>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Vue from 'vue';
	import {
		Swipe,
		SwipeItem
	} from 'vant';
	import {
		Lazyload
	} from 'vant';
	import Product from "@/components/product.vue";
	Vue.use(Swipe).use(SwipeItem);
	Vue.use(Lazyload);
	import xzProductApi from "@/api/xzProduct"
	export default {
		name: 'home',
		data() {
			return {
				images: [
					'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/68121/7/11381/151472/5d8e01c1E187dbef5/3294665a816d0e15.jpg!cr_1125x445_0_171!q70.jpg.dpg',
					'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/71176/35/11397/99815/5d8b45b4Eea9d85d3/a20846eb35f55bcb.jpg!cr_1125x445_0_171!q70.jpg.dpg',
					'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/39975/6/2210/103146/5cbfdd4fEd359fb15/90c41bac5ab851de.jpg!cr_1125x445_0_171!q70.jpg.dpg',
					'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/82821/30/11477/108517/5d8cafcfEa36c6fd9/0d7162b880fb1268.jpg!cr_1125x445_0_171!q70.jpg.dpg'
				],
				menuList: [{
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
					name: "爱回收"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t1/39401/17/2391/5859/5cc06fcfE2ad40668/28cda0a571b4a576.png",
					name: "转转"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t1/17169/3/4127/4611/5c2f35cfEd87b0dd5/65c0cdc1362635fc.png",
					name: "京东"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t17725/156/1767366877/17404/f45d418b/5ad87bf0N66c5db7c.png",
					name: "京东到家"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t18454/342/2607665324/6406/273daced/5b03b74eN3541598d.png",
					name: "京东美妆"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t16990/157/2001547525/17770/a7b93378/5ae01befN2494769f.png",
					name: "京东拼团"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t22228/270/207441984/11564/88140ab7/5b03fae3N67f78fe3.png",
					name: "珠宝"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t1/7068/29/8987/5605/5c120da2Ecae1cc3a/016033c7ef3e0c6c.png",
					name: "二手车"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t16828/63/2653634926/5662/d18f6fa1/5b03b779N5c0b196f.png",
					name: "超值租借"
				}, {
					img: "//m.360buyimg.com/mobilecms/s120x120_jfs/t1/22262/9/1470/4527/5c120cd0E5d3c6c66/4792ec307a853e9f.png",
					name: "全部分类"
				}],
				cateList: [],
				currentCategoryId:1,
				isActive:false
			}
		},
		components:{
			Product
		},
		methods:{
			getCategoryList(){
					xzProductApi.getXZCatetory().then(res=>{
						this.cateList = res.list
					})
				},
				initPage(){
					this.getCategoryList();
				},
				tabItem(id){
					this.currentCategoryId = id;
				},
				toSearchPage(){
					this.$router.push("/search");
				}
			},
			created(){
				this.initPage();
			}
		}
</script>
<style lang="less">
	.search {
		background-color: #c82519;
		padding: 8px 5px;
		z-index:4;
		position: sticky;
		top:0;
		left:0;
		.search-box {
			height: 25px;
			display: flex;
			box-sizing: border-box;
			color: #FFFFFF;
			

			.van-icon {
				line-height: 25px;
			}

			.search-text {
				flex: auto;
				background-color: #fff;
				text-align: left;
				margin: 0 5px;
				border-radius: 4px;
				line-height: 25px;
				color: #333333;
				padding: 0 5px;
			}
			
			.search-button{
				line-height: 25px;
			}
			
			
			
		}
	}

	.car {
		position: relative;
		.car-bg{
			position: absolute;
			top:-41px;
			width:100%;
			height:150px;
			border-bottom-left-radius:50%;
			border-bottom-right-radius:50%;
			background-image:linear-gradient(0deg,#f1503b,#c82519 50%);
		}
		
		.carimg-wrapper {
			margin: 0 10px;
			
			img {
				margin-top: 10px;
				height: 130px;
				border-radius: 5px;
				width: 100%;
			}
		}

	}


	.menu {
		margin: 10px 10px 0px 10px;
		border-radius: 5px;
		display: flex;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		border-radius: 7px;

		>* {
			width: 20%;

			img {
				margin-top: 10px;
				height: 30px;
				width: 30px;
			}
		}
	}

	.cate-wrapper {
		width: 100%;
		margin-top: 10px;
		background-color: #FFFFFF;
		overflow: scroll;
		position: sticky;
		left:0;
		top:41px;
		z-index:5;
		.cate-list {
			width: 1900px;

			.cate-item {
				float: left;
				padding: 0 5px;
				height: 35px;
				line-height: 35px;
				transition: all .3s;
			}
			.cate-item-active{
				color:#333333;
				font-size: 16px;
			}
		}
	}
</style>
